<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
</head>
<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label for="">
                    Name:
                    <input type="text" class="form-control" v-model="name" @keyup.enter="add">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
                <label for="">
                    搜索
                    <input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
                </label>
            </div>
        </div>


        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <td>Id</td>
                    <td>Name</td>
                    <td>Ctime</td>
                    <td>Operation</td>
                </tr>
            </thead>
            <tbody>
                <!-- search() 返回对象数组 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.Ctime | dateFormat("") }}</td>
                    <td>
                        <a href="javascript:;" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>   

        // 时间格式化 过滤器
        Vue.filter("dateFormat",function(dataStr,pattern=""){
            var y = dataStr.getFullYear();
            var m = (dataStr.getMonth() + 1).toString().padStart(2,"0");
            var d = (dataStr.getDate()).toString().padStart(2,"0");
            if (pattern.toLowerCase() == 'yyyy-mm-dd') {  
                return y + '-' + m + '-' + d;
            }
            else{
                var hour = dataStr.getHours().toString().padStart(2,"0");
                var min = dataStr.getMinutes().toString().padStart(2,"0");
                var sec = dataStr.getSeconds().toString().padStart(2,"0");
                return y + '-' + m + '-' + d + " " + hour + ':' + min + ':' + sec;
            }
        });

        // 自定义全局按键修饰符
        Vue.config.keyCodes.f2 = 113;

        // 自定义全局指令 --> 文本框自动聚焦
        // 参数1 指令的名称  不需要加前缀 v-  但是在调用的时候得加 -v 
        // 参数2 是一个对象 有相关的处理函数
        Vue.directive("focus",{
            // 当指令绑定到元素上的时候 会立即执行bind函数 只执行一次
            // 此时还未插入dom树    
            bind:function(el){
            },
            // 元素插入到dom树时 执行
            inserted:function(el){
                 // el就是绑定的元素   为dom对象
                 el.focus();
                // 自动对焦
            },
            updated:function(){}
        })

        
        Vue.directive("color",{
            bind:function(el,binding){
                // binding是 参数的集合
                el.style.color = binding.value;
                console.log(binding.value);
            },
            inserted:function(){
                
            }
        })

        var vm = new Vue({
            el : "#app",
            data : {
                id : "",
                name : "",
                keywords : "",
                list: [
                    { id: 1, name:"奔驰", Ctime: new Date() },
                    { id: 2, name:"宝马", Ctime: new Date() }
                ],
            },
            methods: {
                add(){
                    if (this.id == "") {
                        return ;
                    }
                    var car = { id : this.id, name : this.name, Ctime : new Date() }
                    this.list.push(car);
                    this.id = this.name = "";
                },
                del(id){
                    // some()是特殊的for循环 当 回调函数返回true时 停止遍历
                    // 当some(callback)  让some函数去帮我们执行 我们制定的函数
                     this.list.some((item,i) => {
                         if (item.id == id) {
                             // 根据数组索引 去除元素
                             this.list.splice(i,1)
                             return true;
                         }
                     }) 
                },
                search(keywords){
                    // var newList = []
                    // this.list.forEach(item => {
                    //     if(item.name.indexOf(keywords) != -1){
                    //         newList.push(item)
                    //     }
                    // })
                    // return newList;
                    return this.list.filter(item => {
                        if (item.name.includes(keywords)) {
                            // 如果包含 keywords 则返回 自动push到newList
                            return item;
                        }
                    })
                }
            }
        });

        
    </script>
    
</body>
</html>